<template>
    <el-form-item :label="$t('storage.http_protocol')">
        <el-radio-group v-model="storage.txcos_http_protocol">
            <el-radio v-for="(item, index) in http_protocols" :key="index" :label="item.value" border>{{ item.title }}</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('storage.region')">
        <el-select v-model="storage.txcos_point" placeholder="请选择" style="width: 300px;">
            <el-option label="中国大陆 公有云地域 北京一区" value="cos.ap-beijing-1.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 北京" value="cos.ap-beijing.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 南京" value="cos.ap-nanjing.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 上海" value="cos.ap-shanghai.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 广州" value="cos.ap-guangzhou.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 成都" value="cos.ap-chengdu.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 重庆" value="cos.ap-chongqing.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 深圳金融" value="cos.ap-shenzhen-fsi.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 上海金融" value="cos.ap-shanghai-fsi.myqcloud.com" />
            <el-option label="中国大陆 公有云地域 北京金融" value="cos.ap-beijing-fsi.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 中国香港" value="cos.ap-hongkong.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 新加坡" value="cos.ap-singapore.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 孟买" value="cos.ap-mumbai.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 雅加达" value="cos.ap-jakarta.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 首尔" value="cos.ap-seoul.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 曼谷" value="cos.ap-bangkok.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 东京" value="cos.ap-tokyo.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 硅谷" value="cos.na-siliconvalley.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 弗吉尼亚" value="cos.na-ashburn.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 多伦多" value="cos.na-toronto.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 圣保罗" value="cos.sa-saopaulo.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 法兰克福" value="cos.eu-frankfurt.myqcloud.com" />
            <el-option label="亚太地区 公有云地域 莫斯科" value="cos.eu-moscow.myqcloud.com" />
        </el-select>
    </el-form-item>
    <el-form-item :label="$t('storage.bucket')">
        <el-input v-model="storage.txcos_bucket" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.http_domain')">
        <el-input v-model="storage.txcos_http_domain" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.access_key')">
        <el-input v-model="storage.txcos_access_key" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.secret_key')">
        <el-input v-model="storage.txcos_secret_key" clearable></el-input>
    </el-form-item>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { useStore } from 'vuex';
// 使用 Vuex store
const store = useStore();
// 接收父组件传递的 HTTP 协议选项
const props = defineProps({
    http_protocols: Array
});
// 定义用于发射更新事件的方法
const emit = defineEmits(['update-storage']);
// 本地存储配置的响应式对象
const storage = reactive({
    txcos_http_protocol: '',
    txcos_point: '',
    txcos_bucket: '',
    txcos_http_domain: '',
    txcos_access_key: '',
    txcos_secret_key: '',
});
// 监听 storage 对象的变化并发射 update-storage 事件
// 这允许子组件将状态更改通知给父组件
watch(storage, (newValue) => {
    emit('update-storage', newValue);
}, { deep: true });
// 监听 store.state.system.store对象变化时赋值
watch(() => store.state.system.storage, (newStorage) => {
    storage.txcos_http_protocol = newStorage.txcos_http_protocol;
    storage.txcos_point = newStorage.txcos_point;
    storage.txcos_bucket = newStorage.txcos_bucket;
    storage.txcos_http_domain = newStorage.txcos_http_domain;
    storage.txcos_access_key = newStorage.txcos_access_key;
    storage.txcos_secret_key = newStorage.txcos_secret_key;
}, { deep: true, immediate: true });
</script>